<template>
    <div id="User">
        <div class="top" @click="showPopup">
            <van-image round width="70px" height="70px" :src="avatarSrc" />
            <div class="right">
                <h3>{{nickname}}</h3>
                <span>></span>
            </div>
        </div>
        <van-grid :column-num="3">
            <van-grid-item icon="label-o" text="我的订单" />
            <van-grid-item icon="bill-o" text="优惠卷" />
            <van-grid-item icon="goods-collect-o" text="礼品卡" />
            <van-grid-item icon="location-o" text="我的收藏" />
            <van-grid-item icon="flag-o" text="我的足迹" />
            <van-grid-item icon="contact" text="会员订单" />
            <van-grid-item icon="aim" text="地址管理" />
            <van-grid-item icon="warn-o" text="账号安全" />
            <van-grid-item icon="question-o" text="联系客服" />
            <van-grid-item
                icon="smile-comment-o"
                text="帮助中心"
            /><van-grid-item icon="question-o" text="意见反馈" />
        </van-grid>
        <van-popup v-model="show">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px">
                    <van-button round block type="info" native-type="submit"
                        >提交</van-button
                    >
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
import { loginByWeb } from "../request/api";
export default {
    data() {
        return {
            avatarSrc: require("../assets/avatar.png"),
            show: false,
            username: "",
            password: "",
            nickname: '点击登录'
        };
    },
    created(){
        // 组件刚创建的时候需要判断用户有没有登录，获取localStorage有没有token值，
        // 如果有token，就表示登录，就应该填上用户信息
        let token = localStorage.getItem("token");
        if(token){
            // 表示已经有登录状态，就要网页面上渲染用户信息
            let userInfo = JSON.parse(localStorage.getItem("userInfo"));
            this.nickname = userInfo.nickname
            this.avatarSrc = userInfo.avatar
        }

    },
    methods: {
        // 显示登录页面
        showPopup() {
            let token = localStorage.getItem("token")
            if (token) {
                this.show = false;
            } else {
                this.show = true;
            }       
        },
        //点击登录自动注册账号
        onSubmit(values) {
            // console.log("submit", values);
            let username = values["用户名"];
            let pwd = values["密码"];
            loginByWeb({ username, pwd }).then((res) => {
                console.log(res);
                if (res.data.errno == 0) {
                    // 提示框提示登录成功
                    this.$toast.success("登录成功");
                    localStorage.setItem('token',res.data.data.token)
                    localStorage.setItem('userInfo',JSON.stringify(res.data.data.userInfo))
                    // 1s后关闭模态框
                    setTimeout(() => {
                        this.show = false
                        this.nickname = res.data.data.userInfo.nickname
                        this.avatarSrc = res.data.data.userInfo.avatar
                    }, 1000);
                }else if(res.data.errno == 602){
                    this.$toast.fail(res.data.errmsg);
                }
            });
        },
    },
};
</script>
 
<style lang = "less" scoped>
#User {
    display: flex;
    flex-direction: column;
    /* 让盒子高度沾满整个屏幕 */
    height: calc(100vh - 50px);
}
.top {
    background: #333;
    color: #fff;
    padding: 30px 2%;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .right {
        margin-left: 10px;
        flex: 1;
        display: flex;
        justify-content: space-between;
    }
}
.van-grid {
    flex: 1;
}
.van-popup {
    width: 85%;
}
</style>